<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="share_index">
      <img class="rule_img" src="../../../assets/img/modules/share/icon_6.png" alt="" @click="showModel = true">
      <div class="number_top">
        <strong class="bg_01">{{$store.state.share.numberYb}}<span>圆币</span></strong>
        <strong class="bg_02">{{$store.state.share.numberYb}}<span>圆币</span></strong>
        <p class="title_name"><span>多邀多得</span>  <span>上不封顶</span></p>
        <p class="hy_text">好友注册后，TA可得{{$store.state.share.numberYbOld}}元助学{{$store.state.gsign === 'mhzg' ? '补贴' : '金'}}</p>
      </div>
      <div class="btn_user_list">
        <!--<swiper :options="swiperShareUser" ref="swiperShareUser" class="swiperShareUser">
          <swiper-slide key="item">梁艳 已获得300圆币</swiper-slide>
          <swiper-slide key="item">李驹 已获得300圆币</swiper-slide>
          <swiper-slide key="item">李浩昌 已获得300圆币</swiper-slide>
          <swiper-slide key="item">陈小周 已获得300圆币</swiper-slide>
          <swiper-slide key="item">付晨楼 已获得300圆币</swiper-slide>
        </swiper>-->
        <img class="getJbBtn" src="../../../assets/img/modules/share/icon_8.png" alt="" @click="shareAPPorWx">
      </div>
      <div class="award_list">
        <div class="top_title">
          <p>奖励进度 </p>
          <!--        <a href="javascript:;">进度明细 <van-icon name="arrow" /></a>-->
        </div>
        <div class="tab_list">
          <div class="tab_item">
            <!--李产品说 这个是相加的 粉丝数不减少-->
            <strong>{{userData.follow}}<span>人</span></strong>
            <p>粉丝数</p>
          </div>
          <div class="tab_item">
            <strong>{{userData.user}}<span>人</span></strong>
            <p>会员数</p>
          </div>
          <div class="tab_item">
            <strong>{{userData.orderPerson}}<span>人</span></strong>
            <p>报读数</p>
          </div>
          <div class="tab_item">
            <strong>{{userData.orderCNY}}<span>圆币</span></strong>
            <p>已获得</p>
          </div>
        </div>
      </div>
      <div class="legend_img">
        <div class="text_item">
          分享微信好友
        </div>
        <div class="text_item">
          好友领取助学金
        </div>
        <div class="text_item">
          好友报读入学<br>你得{{$store.state.share.numberYb}}圆币
        </div>
      </div>
    <div v-if="showModel" class="model_status_1">
      <div class="model_tab_body">
        <p>1.活动参与人员限制：发起邀请者必须为本平台用户。</p>
        <p>2.助学补贴券限制：平台有条件发放给用户的用于报读减免的助学补贴券，请在助补贴券有效期内使用。</p>
        <p>3.圆币发放条件：邀请的用户在注册成功30天内提交报读，经过系统核算后发放圆币。</p>
        <p>4.圆币发放时间：鉴于系统核算规则，圆币将会在被邀请人完成报读入学30天后会发放到你的账号，若核算期间发生报读退费，系统判断为圆币失效。</p>
        <p>5.圆币如何使用：兑换礼品。</p>
        <p>6.本平台可在法律法规允许的范围内对本次活动规则解释做出适当修改。</p>
        <span>*本次活动与“苹果公司”无关</span>
        <img class="img_btn" src="../../../assets/img/modules/score/qy_10.png" alt="" @click="showModel = false">
      </div>
    </div>
    <!--分享弹窗-->
    <div v-if="shareShow" class="share_btn_img" @click="shareShow = false">
      <img src="../../../assets/img/modules/share/icon_11.png" alt="">
    </div>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
  </div>
  </van-pull-refresh>
</template>
<script>
import wxapi from '@/utils/wxapi.js'
import dragLoding from '@/components/loding'
export default {
  name: 'share_index',
  components: {
    dragLoding
  },
  data () {
    return {
      isLoading: false, // 下拉刷新
      showModel: false,
      shareShow: false,
      showLoding: true,
      shareUrl: '',
      swiperShareUser: {
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      },
      userData: {
        user: 0, // 会员数
        follow: 0, // 粉丝数
        orderPerson: 0, // 下单人数
        orderCNY: 0 // 成功人数
      }
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/18 0018 12:13
     *@function  下拉刷新
     *****************************************/
    onRefresh () {
      this.getData()
      this.isLoading = false
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/15 0015 16:46
     *@function  判断分享使用 app分享还是wx接口
     *****************************************/
    shareAPPorWx () {
      if (this.$store.state.device === 'WX') {
        this.shareShow = true
      } else if (this.$store.state.device === 'APP') {
        try {
          // eslint-disable-next-line no-undef
          Phone.inShare(this.shareUrl, '你有' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '待领取→', '93%加入了「国开」的会员都获得了学历提升，现注册还送' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '券与会员权益哦！', 'http://m.oucgz.cn/images/share_wx.png')
        } catch (e) {}
      }
    },
    /* wf_Huang 2019/8/27 0027 获取数据 */
    getData () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/web1.wx_user/getFollowByPhone?phone=${this.$store.state.share.phone}&gsign=${this.$store.state.gsign}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast(res.msg)
          return false
        }
        this.userData = res.data
        this.showLoding = false
      }).catch(() => {})
    },
    wxRegCallback () {
      // 用于微信JS-SDK回调
      this.wxShareTimeline()
      this.wxShareAppMessage()
    },
    wxShareTimeline () {
      // 微信自定义分享到朋友圈
      let option = {
        title: '你有' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '待领取→', // 分享标题, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'http://m.oucgz.cn/images/share_wx.png', // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.shareShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareTimeline(option)
    },
    wxShareAppMessage () {
      // 微信自定义分享给朋友
      let option = {
        title: '你有' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '待领取→', // 分享标题, 请自行替换
        desc: '93%加入了「国开」的会员都获得了学历提升，现注册还送' + this.$store.state.share.numberYbOld + '元助学' + (this.$store.state.gsign === 'mhzg' ? '补贴' : '金') + '券与会员权益哦！', // 分享描述, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'http://m.oucgz.cn/images/share_wx.png', // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.shareShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareAppMessage(option)
    },
    /* wf_Huang 2019/8/28 0028 拼接分享地址 */
    setShareUrl () {
      this.shareUrl = `${window.SITE_CONFIG['Url']}share-register?device=${this.$store.state.device}&gsign=${this.$store.state.gsign}&uniacid=${this.$store.state.uniacid}&phone=${this.$store.state.share.phone}`
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#FF2437')
    if (this.$route.query.device) {
      this.$store.state.device = this.$route.query.device
      // 处理不同的显示金额
      if (this.$store.state.gsign === 'mhzg') {
        this.$store.state.share.numberYb = 300
        this.$store.state.share.numberYbOld = 500
      } else {
        this.$store.state.share.numberYb = 200
        this.$store.state.share.numberYbOld = 100
      }
    }
    if (this.$route.query.gsign) {
      this.$store.state.gsign = this.$route.query.gsign
    }
    if (this.$route.query.uniacid) {
      this.$store.state.uniacid = this.$route.query.uniacid
    }
    if (this.$route.query.phone) {
      this.$store.state.share.phone = this.$route.query.phone
      window.location.href = window.location.href.split('?')[0]
    }
    localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    this.getData()
    this.setShareUrl()
    wxapi.wxRegister(this.wxRegCallback)
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .share_index {
    max-width: 750px;
    margin: 0 auto;
    background: url("../../../assets/img/modules/share/icon_1.png") no-repeat center;
    background-size: 100% 100%;
    width: 750px;
    height: 1584px;
    position: relative;
    .number_top{
      position: absolute;
      top: 230px;
      text-align: center;
      left: 0;
      right: 0;
      font-size: 245px;
      display: block;
      .bg_01{
        position: absolute;
        left: 10px;
        right: 0;
        font-size: 245px;
        color: #FAEBB3;
        span{
          font-size: 70px;
        }
      }
      .bg_02{
        position: absolute;
        left: 0;
        right: 0;
        color: #F9AE57;
        span{
          font-size: 70px;
        }
      }
      .title_name{
        position: absolute;
        top: 226px;
        padding: 0 110px;
        letter-spacing: 20px;
        width: 100%;
        font-size: 40px;
        color: #FAEBB3;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
      }
      .hy_text{
        position: absolute;
        top: 565px;
        padding: 0 110px;
        width: 100%;
        font-size: 32px;
        color: #FAEBB3;
      }
    }
    .rule_img{
      width: 172px;
      height: 54px;
      position: absolute;
      right: 0;
      top: 50px;
    }
    .btn_user_list{
      position: absolute;
      width: 577px;
      top: 720px;
      left: 50%;
      transform: translate(-50%, -50%);
      .getJbBtn{
        width: 577px;
        height: 118px;
        display: block;
      }
      .swiperShareUser{
        font-size: 26px;
        color: #FDF2C0;
        text-align: center;
        height: 50px;
      }
    }
    .award_list{
      width: 670px;
      height: 244px;
      background: #FFFFFF;
      border-radius: 12px;
      position: absolute;
      top: 1050px;
      left: 50%;
      transform: translate(-50%, -50%);
      .top_title{
        background: #F6F6F6;
        border-radius: 12px 12px 0px 0px;
        height: 72px;
        display: flex;
        justify-content: space-between;
        padding:  0 30px;
        align-items: center;
        p{
          font-size: 28px;
          color: #4A4A4A;
        }
        a{
          font-size: 22px;
          color: #9B9B9B;
        }
      }
    }
    .tab_list{
      display: flex;
      align-items: center;
      justify-content: center;
      .tab_item{
        flex: 1;
        text-align: center;
        strong{
          font-size: 50px;
          color: #FF3927;
          span{
            font-size: 22px;
            color: #FF3927;
          }
        }
        p{
          font-size: 22px;
          color: #9B9B9B;
          margin: 0 ;
        }
      }
    }
    .legend_img{
      background: url("../../../assets/img/modules/share/icon_9.png") no-repeat center;
      background-size: 652px 193px ;
      width: 652px;
      height: 259px;
      position: absolute;
      top: 1350px;
      left: 50%;
      display: flex;
      transform: translate(-50%, -50%);
      justify-content: space-between;
      padding-top: 230px;
      .text_item{
        font-size: 28px;
        color: #FAEBB3;
      }
    }
    .model_status_1{
      background-color: rgba(0,0,0,0.8);
      position: fixed;
      z-index: 99;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      .model_tab_body{
        width: 580px;
        position: absolute;
        top: 45%;
        left: 50%;
        border-radius: 4px;
        background: #ffffff;
        transform: translate(-50%, -50%);
        padding: 40px 40px;
        p{
          font-size: 28px;
          color: #666666;
          line-height: 35px;
          padding-top: 30px;
          margin: 0 ;
          text-indent: 30px;
        }
        span{
          font-size: 26px;
          color: #FCB267;
          display: block;
          margin: 20px 0;
        }
        .img_btn{
          width: 64px;
          height: 64px;
          position: absolute;
          bottom: -120px;
          left: calc(50% - 32px);
        }
      }
    }
  }
</style>
